import React from 'react';
import { StyleSheet, View, TouchableOpacity, ScrollView, FlatList, Image } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// 模拟收藏数据
const FAVORITES = [
  {
    id: '1',
    type: 'activity',
    title: '太极拳晨练班',
    description: '每周三次的太极拳晨练，适合各年龄段的老年人参与。',
    image: 'https://randomuser.me/api/portraits/men/32.jpg',
    date: '2023-10-25',
  },
  {
    id: '2',
    type: 'article',
    title: '老年人健康饮食指南',
    description: '专为老年人设计的健康饮食建议，包含多种适合老年人的食谱。',
    image: 'https://randomuser.me/api/portraits/women/44.jpg',
    date: '2023-10-18',
  },
  {
    id: '3',
    type: 'activity',
    title: '社区棋牌比赛',
    description: '每月一次的社区棋牌比赛，包括象棋、围棋和扑克等多种项目。',
    image: 'https://randomuser.me/api/portraits/men/67.jpg',
    date: '2023-10-30',
  },
  {
    id: '4',
    type: 'article',
    title: '老年人旅游攻略',
    description: '为老年人提供的旅游建议，包括适合老年人的旅游目的地和注意事项。',
    image: 'https://randomuser.me/api/portraits/women/28.jpg',
    date: '2023-10-12',
  },
];

export default function FavoritesScreen() {
  const colorScheme = useColorScheme();
  const tintColor = Colors[colorScheme ?? 'light'].tint;
  const router = useRouter();

  const renderFavoriteItem = ({ item }) => {
    // 根据收藏类型设置不同的图标
    let typeIcon = 'calendar-month';
    let typeText = '活动';
    
    if (item.type === 'article') {
      typeIcon = 'file-document-outline';
      typeText = '文章';
    }

    return (
      <TouchableOpacity 
        style={styles.favoriteItem}
        onPress={() => console.log(`查看收藏详情: ${item.title}`)}
      >
        <Image source={{ uri: item.image }} style={styles.favoriteImage} />
        
        <View style={styles.favoriteContent}>
          <View style={styles.favoriteHeader}>
            <ThemedText style={styles.favoriteTitle}>{item.title}</ThemedText>
            <View style={styles.typeBadge}>
              <MaterialCommunityIcons name={typeIcon} size={14} color="#fff" style={styles.typeIcon} />
              <ThemedText style={styles.typeText}>{typeText}</ThemedText>
            </View>
          </View>
          
          <ThemedText style={styles.favoriteDescription} numberOfLines={2}>
            {item.description}
          </ThemedText>
          
          <View style={styles.favoriteFooter}>
            <View style={styles.dateContainer}>
              <MaterialCommunityIcons name="calendar" size={16} color={tintColor} />
              <ThemedText style={styles.dateText}>{item.date}</ThemedText>
            </View>
            
            <TouchableOpacity 
              style={styles.removeButton}
              onPress={() => console.log(`移除收藏: ${item.title}`)}
            >
              <MaterialCommunityIcons name="heart-off" size={20} color="#FF6B6B" />
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <ThemedView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <MaterialCommunityIcons name="arrow-left" size={28} color={tintColor} />
        </TouchableOpacity>
        <ThemedText style={styles.headerTitle}>我的收藏</ThemedText>
        <View style={styles.placeholder} />
      </View>
      
      <ScrollView style={styles.scrollView}>
        <View style={styles.filterContainer}>
          <TouchableOpacity style={[styles.filterButton, styles.activeFilter]}>
            <ThemedText style={styles.activeFilterText}>全部</ThemedText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterButton}>
            <ThemedText style={styles.filterText}>活动</ThemedText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterButton}>
            <ThemedText style={styles.filterText}>文章</ThemedText>
          </TouchableOpacity>
        </View>
        
        <FlatList
          data={FAVORITES}
          renderItem={renderFavoriteItem}
          keyExtractor={item => item.id}
          scrollEnabled={false}
          contentContainerStyle={styles.favoritesList}
        />
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 60,
    paddingBottom: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  headerTitle: {
    fontSize: 22,
    fontWeight: 'bold',
  },
  placeholder: {
    width: 40,
  },
  scrollView: {
    flex: 1,
  },
  filterContainer: {
    flexDirection: 'row',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E1E1E1',
  },
  filterButton: {
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 20,
    marginRight: 10,
  },
  activeFilter: {
    backgroundColor: '#0a7ea4',
  },
  filterText: {
    fontSize: 16,
    color: '#666',
  },
  activeFilterText: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
  favoritesList: {
    padding: 15,
  },
  favoriteItem: {
    flexDirection: 'row',
    backgroundColor: '#f9f9f9',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  favoriteImage: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 15,
  },
  favoriteContent: {
    flex: 1,
  },
  favoriteHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  favoriteTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    flex: 1,
    marginRight: 10,
  },
  typeBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#0a7ea4',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  typeIcon: {
    marginRight: 4,
  },
  typeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '500',
  },
  favoriteDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
    lineHeight: 20,
  },
  favoriteFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  dateContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  dateText: {
    fontSize: 14,
    color: '#666',
    marginLeft: 5,
  },
  removeButton: {
    padding: 5,
  },
});